<template>
  <div>
    <div class=" xwxs:(h-[600px]) xwsm:(h-[200px])"></div>
    <el-row class="px-1 mt-[20px]" :gutter="20">
      <el-col class="mb-[20px]" @click="tapList(item)" :xs="24" :sm="8" :md="8" :lg="8" v-for="(item, index) in list"
        :key="item.id">
        <el-card>
          <div class="text-[20px]">名称：{{ item.name }}</div>
          <div class="flex justify-center items-center py-[10px]">
            <img class="w-[62px] h-[62px]" v-if="item.type == 0" src="../../../assets/green.png" alt="">
            <img class="w-[62px] h-[62px]" v-if="item.type == 2" src="../../../assets/red.png" alt="">
            <img class="w-[62px] h-[62px]" v-if="item.type == 1" src="../../../assets/yellow.png" alt="">
          </div>
          <div class="flex">
            <div class="text-[20px] whitespace-nowrap" style="color: green;" v-if="item.type == 0">状态：正常</div>
            <div class="text-[20px] whitespace-nowrap" style="color: red;" v-if="item.type == 2">状态：告警</div>
            <div class="text-[20px] whitespace-nowrap" style="color: yellow;" v-if="item.type == 1">状态：告警</div>
            <!-- gjxx -->
            <div class="mx-[20px] w-full mt-[-3px]">
              <el-carousel height="20px" direction="vertical">
                <el-carousel-item v-for="(i, n) in item.gjxx" :key="n">
                  <h3 text="2xl " justify="center">{{ i }}</h3>
                </el-carousel-item>
              </el-carousel>
            </div>
          </div>


        </el-card>
      </el-col>
    </el-row>

    <div class="flex justify-center">
      <el-pagination v-model:current-page="currentPage4" v-model:page-size="pageSize4"
        layout="total,  prev, pager, next, jumper" :total="total" @current-change="handleCurrentChange" />
    </div>


  </div>
</template>
<script setup>
import { isShowNewList, projectID, projectName, init } from '../common'
import { getStorage, setStorage, clearStorage, removeStorage } from '~/composables/storage'

const userStore = useUserStore()

const currentPage4 = ref(0)
const pageSize4 = ref(9)


const list = ref([])
const total = ref(0)


const getData = () => {
  const isLineStore = getStorage('isLine')

  let Q = {
    // factoryid: '',
    factoryid: !isLineStore ? userStore.userInfo.id : '',
    index: currentPage4.value,
    size: pageSize4.value
  }

  getProjectList(Q).then(res => {
    console.log(res)
    total.value = res.page.total
    list.value = res.result
  })
}
getData()


const handleSizeChange = (val) => {
  console.log(`${val} items per page`)
}
const handleCurrentChange = (val) => {
  getData()
}


const tapList = (item) => {
  isShowNewList.value = false
  projectID.value = item.id
  projectName.value = item.name
  init()
}

</script>